<template>
	<view class="container">
		<view class="header">
			<text class="balance">账户余额 <text class="balance-amount">¥1500.00</text></text>
		</view>

		<view class="form-item">
			<text class="label">提现金额</text>
			<input type="number" class="input1" />
			<text class="unit">元</text>
		</view>

		<view class="form-item">
			<text class="label1">真实姓名</text>
			<input type="text" class="input2" />
		</view>

		<view class="form-item">
			<text class="label2">请选择银行</text>
			<picker mode="selector" :range="banks" @change="onBankChange" class="picker">
				<view class="picker-text">{{ selectedBank }}</view>
			</picker>
		</view>

		<view class="form-item">
			<text class="label1">请输入银行卡卡号</text>
			<input type="number" class="input" />
		</view>

		<view class="note">
			xxx不会通过任何渠道泄露您的个人信息，请放心填写
		</view>

		<view class="submit">
			<button class="submit-button" type="primary" @click="submitPrimary">确认信息并提交</button>
		</view>

		<view class="record-header">
			<text class="record-title">提现记录</text>
		</view>
		<view v-for="(item, index) in records" :key="index" class="record-entry">
			<view class="record-details">
				<text class="entry-title">{{ item.title }}</text>
				<text class="entry-amount">{{ item.amount }}</text>
			</view>
			<view class="entry-status">
				
				<text class="entry-date">{{ item.date }}</text>
				<text class="entry-state">{{ item.state }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banks: ['请选择银行', '中国银行', '中国建设银行', '中国农业银行', '中国邮政银行'], // 示例银行列表
				selectedBank: '请选择银行', // 默认选择内容

				records: [{
						title: "商家提现申请",
						amount: "-1.00",
						date: "2020-02-13 09:32:12",
						state: "审核中"
					},
					{
						title: "商家提现申请",
						date: "2020-02-13 09:32:12",
						amount: "-1.00",
						state: "审核通过"
					},
					{
						title: "商家提现申请",
						date: "2020-02-13 09:32:12",
						amount: "-1.00",
						state: "审核不通过"
					},
				],
			};
		},
		methods: {
			onBankChange(e) {
				this.selectedBank = this.banks[e.detail.value]; // 更新选择的银行
			},
			
			submitPrimary(){
				uni.navigateTo({
					url:"/pages/szy-ShouZhiMingXi/fanhuijieguo/fanhuijieguo"
				})
			}
			
		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

	.header {
		padding-bottom: 5px;
		border-bottom: 1px solid #BBB;
	}

	.balance {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.balance-amount {
		color: red;
		margin-left: 40px;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #BBB;
	}

	.label {
		font-size: 14px;
		font-weight: 600;
		min-width: 90px;
		/* 确保标签对齐，避免移动 */
	}

	.label1 {
		font-size: 14px;
		font-weight: 600;
		min-width: 90px;
		margin-top: -10px;
	}

	.label2 {
		font-size: 14px;
		font-weight: 600;
		min-width: 90px;
		margin-top: -10px;
	}

	.input1 {
		width: 80px;
		height: 20px;
		border: 1px solid #ccc;
		border-radius: 4px;
		margin-left: -5px;
		margin-top: 7px;
		margin-bottom: 7px;
	}

	.input2 {
		width: 80px;
		margin-right: 185px;
		margin-bottom: 7px;
	}

	.unit {
		margin-right: 160px;
	}

	.input {
		width: 220px;
		margin-bottom: 7px;

	}

	.input:focus {
		border-color: #007aff;
		/* 输入框聚焦时颜色 */
	}

	.picker {
		width: 160px;
		margin-right: 140px;
		margin-bottom: 7px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.picker-text {
		font-size: 12px;
		color: #101010;
		padding: 5px;
	}

	.note {
		color: #999;
		font-size: 12px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.submit {
		width: 150px;
		height: 80px;
		margin-left: 100px;
	}

	.submit-button {
		font-size: 15px;
		background-color: #007aff;
		color: #fff;
		padding: 10px;
		border-radius: 8px;
		text-align: center;
		transition: background-color 0.3s;
	}

	.submit-button:hover {
		background-color: #0056b3;
	}
	
	.record-header {
	  margin-bottom: 15px;
	}
	
	.record-title {
	  font-size: 18px;
	  font-weight: bold;
	  color: #333;
	}
	
	.record-entry {
	  margin-bottom: 15px;
	  border-bottom: 1px solid #BBB;
	  padding-bottom: 10px;
	}
	
	.record-details {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	}
	
	.entry-title {
	  font-size: 16px;
	  color: #333;
	}
	
	.entry-date {
	  font-size: 14px;
	  color: #999;
	}
	
	.entry-status {
	  display: flex;
	  justify-content: space-between;
	}
	
	.entry-amount {
	  font-size: 16px;
	  color: #333;
	}
	
	.entry-state {
	  font-size: 14px;
	  color: #999;
	}
</style>